<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>学生及宿舍显示</title>
</head>
<body>
<jsp:include page="../common/css_js.jsp"/>
<div class="page-container">

    <div class="mt-3  mb-3">
        <h3>宿舍基本信息</h3>
        <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>

    </div>

    <table class="table" id="myTable">
        <thead>
        <tr>
            <th>宿舍编号</th>
            <th>宿舍性别</th>
            <th>宿舍可住人数</th>
            <th>价格</th>
            <th>宿舍电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${DORM}" var="one" varStatus="sta">
            <tr>
                <td>${one.dorId}</td>
                <td>${one.dorSex}</td>
                <td>${one.dorNum}</td>
                <td>${one.dorPrice}</td>
                <td>${one.dorTel}</td>
                <td>
                    <a class="btn btn-info btn-sm" href="javascript:" onclick="update(${one.dorId})">修改</a>
                    <a class="btn btn-danger btn-sm" href="javascript:" onclick="del(${one.dorId})">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>


</div>
<!-- 添加用的模态框 -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">添加dorm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form  method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>宿舍号</label>
                        <input type="text" name="dorId" id="dorId" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>宿舍性别</label>
                        <input type="text" name="dorSex" id="dorSex" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>宿舍人数</label>
                        <input type="text" name="dorNum" id="dorNum" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>价格</label>
                        <input type="text" name="dorPrice" id="dorPrice" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>宿舍电话</label>
                        <input type="text" name="dorTel" id="dorTel" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
            </div>
        </div>
    </div>
</div>
<%--修改用的模态框--%>
<div class="modal fade" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改dorm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addForm" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>宿舍号</label>
                        <input type="text" name="dorId" id="dorId2" class="form-control" >
                    </div>
                    <div class="form-group">
                        <label>宿舍性别</label>
                        <input type="text" name="dorSex" id="dorSex2" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>可住人数</label>
                        <input type="text" name="dorNum" id="dorNum2" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>价格</label>
                        <input type="text" name="dorPrice" id="dorPrice2" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>宿舍电话</label>
                        <input type="text" name="dorTel" id="dorTel2" class="form-control" >
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="update_do()">提交</button>
            </div>
        </div>
    </div>
</div>

<link href="<%=path%>/static/jquery/jquery.dataTables.min.css" rel="stylesheet">
<script src="<%=path%>/static/jquery/jquery.dataTables.min.js"></script>
<script>
    function change() {
        $('#myTable').DataTable();
    }
</script>

<script>
    //添加
    function add() {
        $("#addModal").modal("show");//弹模态框
    }
    function add_do() {
        $.ajax({
            url: "dormAdd",
            method: "post",
            dataType: "json",
            data: {
                dorId: $("#dorId").val(),
                dorSex: $("#dorSex").val(),
                dorNum: $("#dorNum").val(),
                dorPrice:$("#dorPrice").val(),
                dorTel:$("#dorTel").val()
            },
            success: function (data) {
                console.log(data);
                if('ok' ==data.msg){
                    alert("添加成功");
                    location.reload();
                }else {
                    alert("添加失败");
                }

            },
            error:function (err) {
                alert(JSON.stringify(err))
            }
        });
    }
    //删除
    function del(id) {
    var flag = confirm("你确定要删除吗？");
    if (flag) {
        $.ajax({
            url: "dormDelete",
            type: "post",
            async: false,
            data: {dorId: id},
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if ('ok' == data.msg) {
                    alert("删除成功");
                    location.reload();
                } else alert("删除失败");
            }
        });
    }
}
   //修改
    function update() {
        $("#updateModal").modal("show");//弹模态框
    }
    function update_do() {
        $.ajax({
            url:"dormUpdate",
            method:"post",
            data:{
                dorId:$("#dorId2").val(),
                dorSex:$("#dorSex2").val(),
                dorNum:$("#dorNum2").val(),
                dorPrice:$("#dorPrice2").val(),
                dorTel:$("#dorTel2").val()
            },
            success:function (data) {
                console.log(data);
                if('ok'==data.msg) {
                    alert("修改成功");
                    location.reload();
                }
                else alert("修改失败");
            }
        });
    }

</script>


</body>
</html>
